<template>
  <div ref="ech" class="echarts"></div>
</template>

<script>
import Echarts from 'echarts'
import '../../../node_modules/echarts/map/js/china.js'
export default {
  data() {
    return {
      myChart: {}
    }
  },

  props: ['echartObj'],

  created() {},
  watch: {
    echartObj() {
      // console.log(this.timesharing);
      // console.log(this.startdate);
      this.$nextTick(() => {
        this.loadEchart()
      })
    }
  },
  mounted() {
    let _this = this
    setTimeout(() => {
      this.loadEchart()
      // this.dynamic()
    })
    window.onresize = function() {
      _this.myChart.resize()
    }
  },

  methods: {
    loadEchart() {
  
      this.myChart = Echarts.init(this.$refs.ech) // 动态绑定Id名这样就能解决传多个Echarts过来后只显示一个问题
      this.myChart.setOption({
        legend: this.echartObj.legend,
        color: this.echartObj.color,
        series: this.echartObj.series,
        tooltip: this.echartObj.tooltip,
        grid: this.echartObj.grid,
        xAxis: this.echartObj.xAxis,
        yAxis: this.echartObj.yAxis,
        radar: this.echartObj.radar,
        dataRange: this.echartObj.dataRange,
        dataset: this.echartObj.dataset,
        geo: this.echartObj.geo,
        backgroundColor: this.echartObj.backgroundColor,
        visualMap: this.echartObj.visualMap,
        toolbox: this.echartObj.toolbox
      })

    }
  }
}
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>